<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        padding: 10px;
        background-color: #ccc;
      }
      ul,
      li {
        list-style: none;
      }

      .box ul li {
        float: left;
        color: yellow;
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
      }
      /*清除浮动*/
      .clear-float::after {
        content: "";
        display: table;
        overflow: hidden;
        clear: both;
      }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
  </head>
  <body>
    <div class="box">
      <ul class="clear-float" id="star">
        <!-- ★ -->
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
      </ul>
    </div>
    <script>
      const $li = $("li");
      //事件委托
      $("#star")
        .on("mouseover", "li", function () {
          //获取自己的位置
          const index = $(this).index();
          for (let i = 0; i <= index; i++) {
            $li.eq(i).text("★");
          }
        })
        .on("mouseout", "li", function () {
          $(this).text("☆");
        }).mouseout(function(){
            $li.each(function(i){
                $li.eq(i).text("☆");
            });
        });
    </script>
  </body>
</html>
